【VSCode】Macで文章作成中に制御文字（0x08）が勝手に混ざるので、とりあえず対策した

MacのVSCodeでMarkdownなどの文章を作成していると、「制御文字（0x08）が混ざる」という現象に稀によく遭遇します。この制御文字を可視化し、気づけるようにしました。

#Macintosh

#VSCode（Visual Studio Code）

藤井元貴

2019.02.05

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

サーバーレス開発部の藤井元貴です。艦これローソンコラボにD敗北しました。3月にロッピーで申し込もうと思います。

Macで文章作成中に制御文字（0x08）が勝手に混ざる

MacのVSCodeでMarkdownなどの文章を作成していると、「制御文字（0x08）が混ざる」という現象に稀によく遭遇します。

Markdownの章や表がうまく認識されなかったり、他のOSやアプリで開くと豆腐になったりします。お客様へ提出する資料に混入される場合もあるため、非常に厄介です。

「全角文字を1文字変換中、確定せずDeleteキーで削除する」と発生する模様です。（おそらく）（プレビュー機能を使用中、という条件もあるかもしれません。）

VSCode(macOS)で文章作成、特にMarkdownを書いている方は、一度確認したほうが良いかもしれません。

私が先程まで書いていたMarkdownの資料を見ると、29ヶ所ありました。多すぎ……！

Markdownの認識が失敗する現象例

豆腐が表示される現象例

原因など

GitHubのIssuesにもありますが、まだ解決はしていません。

Using IME with markdown preview enabled, press ESC/BACKSPACE leads in control characters #37114

そこで

下記のサイトを参考に、「制御文字を強調表示」することで、この問題を気づけるようにしました。

Visual Studio Code で制御文字が混ざる問題

[2019/2/6 10:20頃追記]
下記の拡張機能が良いですよ、とコメントをいただきました。ありがとうございます。
・手動または自動で制御文字を削除（嬉しい）
・制御文字の可視化

Remove backspace control character

「制御文字を強調表示」してみた

下記のようにしてみました。

気づくことが大事なので、かなり目立つようにしてみました。（強調表示の横幅が、1文字より大きい……）

環境

項目	バージョン
macOS	High Sierra 10.13.6
VSCode	1.30.2
Google日本語入力	GoogleJapaneseInput-2.24.3250.1+24.2.9

Google日本語入力は、「ばーじょん」で変換するとバージョンが表示されました。

制御文字を強調表示する手順

拡張機能のインストール

下記の拡張機能をインストールします。

Whitespace+

Whitespace+の動作確認

まずはVSCodeのコマンドパレットでwhitespaceと入力し、whitespace+ Toggleを選択します。

そうすると下記のようにデフォルト設定の制御文字が表示されます。

Whitespace+の設定

デフォルトだと「半角空白」や「改行コード」も強調表示されるため、これらを除外します。

VSCodeのコマンドパレットでwhitespaceと入力し、whitespace+ Configを選択します。

すると、config.jsonが開くため、この内容を変更します。

先程の参考サイトを参考に、下記のように変更しました。

{
    "mode": "all",
    "autoStart": true,
    "refreshRate": 100,
    "elements":
    [{
        "name": "space",
        "enabled": false,
        "pattern": "\\s",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(117, 141, 203, 0.3)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    },{
        "name": "tab",
        "enabled": false,
        "pattern": "\\t",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(170, 53, 53, 0.3)",
                "borderColor": "rgba(170, 53, 53, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(223, 97, 97, 0.3)",
                "borderColor": "rgba(223, 97, 97, 0.4)"
            }
        }
    },{
        "name": "newline",
        "enabled": false,
        "pattern": "\\n",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "borderColor": "rgba(38, 150, 38, 0.3)"
            },
            "dark": {
                "borderColor": "rgba(85, 215, 85, 0.4)"
            }
        }
    },{
        "name": "trailing",
        "enabled": "unlessCursorAtEndOfPattern",
        "pattern": "[^\\S\\r\\n]+$",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(117, 141, 203, 0.3)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    },{
        "name": "control",
        "enabled": true,
        "pattern": "[\\cA-\\cH\\cK-\\cL\\cN-\\cZ\\u001B-\\u001F\\u007F]+",
        "style": {
            "borderWidth": "5px",
            "borderRadius": "0px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(255, 0, 0, 0.9)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    }]
}